<template>
	<div class="dropdown" @click="toggleDropdown">
		<div class="dropdown-selected">
			{{ selectedOption?.text }}
			<iconpark-icon icon-id="Frame2087325681" size="1.2rem"></iconpark-icon>
		</div>
		<ul v-if="isOpen" class="dropdown-list">
			<li v-for="option in options" :key="option.value" @click.stop="selectOption(option)">
				{{ option.text }}
			</li>
		</ul>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Option {
	text: string;
	value: number;
}

const options = defineModel<Option[]>('options', { required: true, default: () => [] });
const values = defineModel('values', { default: 0 });

const isOpen = ref(false);
const selectedOption = ref<Option | null>(null);

const toggleDropdown = () => {
	isOpen.value = !isOpen.value;
};

const selectOption = (option: Option) => {
	console.log(option);
	selectedOption.value = option;
	values.value = option.value;
	isOpen.value = false;
};


watch(
	() => values.value,
	(newVal) => {
		selectedOption.value = options.value.find((option) => option.value === newVal) || null;
	},
	{ immediate: true }
);


</script>

<style scoped>
.dropdown {
	position: relative;
	width: 200px;
	background-color: #1d1c3c;
	color: #fff;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}

.dropdown-selected {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.arrow {
	transition: transform 0.3s;
}

.arrow.open {
	transform: rotate(180deg);
}

.dropdown-list {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #1d1c3c;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin-top: 5px;
	list-style: none;
	padding: 0;
    z-index: 10;
}

.dropdown-list li {
	padding: 10px;
	cursor: pointer;
}

.dropdown-list li:hover {
	background-color: #333260;
}
</style>
